<template>
    <div class="body">
      <h2 style="text-align: center; color:white;">全产业链可追溯系统</h2>
      <div id="img">
        <a id="scanQRCode" type="button">
          <img src="../assets/x.png">
        </a>
      </div>
      <h3 style="text-align: center; color:cyan; size: 28px;">点击扫码查看产品溯源</h3>
      <form id="form1" action="https://sy.mujiwulian.net/sy/html/rootDetailPage.html">
        <div id="box">
          <input id="keyword" type="text" name="keyword" placeholder="请输入产品溯源码">
          <input type="hidden" name="openId" id="WxOpenId" value="">
          <input type="hidden" name="sy" id="sy" value="">
        </div>
        <div id="a">
          <a href="#" onclick="send()">
            <img src="../assets/2x.png">
          </a>
        </div>
      </form>
      <div style="text-align: center; font-size: 10px; color: white;margin-top: 20px">
        <p>查询产品追溯码，即可透明追溯生产全过程，安全无忧</p>
      </div>
    </div>
</template>

<script>
    // import wx from 'weixin-js-sdk';
    export default {
        name: "Scan",
        mounted(){
          this.setBodyBackGround();
        },
        methods:{
          // 添加body图片
          setBodyBackGround () {
            document.body.style.backgroundImage = 'url(' + require('../assets/bg2x.jpg') + ')';
            document.body.style.backgroundSize = '100% 100%';
            document.body.style.backgroundRepeat='no-repeat';
          },
          // 清除背景图
          clearBodyBackGround () {
            document.body.style.background = ''
          }
        },
        beforeDestroy () {
          // 离开页面的时候清除
          this.clearBodyBackGround()
        },
    }
</script>

<style scoped>
  h2{
    /*margin-top: 15%;*/
    padding-top: 18%;
    font-size: 25px;
  }
  #img{
    display: block;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  #img img{
    width: 180px;
    max-width: 100%;
    height: 180px;
  }
  h3{
    font-size: 18px;
    margin: 20px;
  }

  #box{
    width: 350px;
    margin: 40px auto;
    font-family: 'Microsoft YaHei';
    font-size: 16px;
    justify-content: center;
    align-items: center;
    display: -webkit-flex;
  }
  input{
    background-color: white;
    width: 80%;
    max-width: 100%;
    border: 1px solid cyan;
    height: 40px;
    /*float: left;*/
    font-size: 15px;
    background-image:url(../assets/1.png);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position:5px center;
    padding:0 0 0 50px;
    border-radius: 50%; /*50%达到纯圆*/
    border-radius:1px 1px 1px 1px; /*左上角、右上角、右下角、左下角*/
    border-radius:10px 10px; /*左上角和右下角为10、右上角和左下角为0*/
  }

  #a{
    display: block;
    text-align: center;
  }
  #a img{
    height: 100%;
    width: 60%;
  }
</style>

